<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" title="简介" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            照片
          </template>
          <img class="img" :src="picture" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ resident.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            居民
          </template>
          {{residentType.type}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-if="isEmail == true">
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱Email
            </template>
            <template v-if="resident.email!=null &&resident.email!=''">{{ resident.email }}
              <el-button size="mini" @click="clickAddEmail(false)">修改</el-button></template>
            <template v-else>暂无<el-button size="mini" @click="clickAddEmail(false)">添加</el-button></template>
          </template>
          <template v-else>
            <el-input v-model="updateEmail" placeholder="请输入邮箱"></el-input>
            <el-button size="mini" @click="addEmail">确认</el-button>
            <el-button size="mini" @click="clickAddEmail(true)">取消</el-button>
          </template>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号码
          </template>
            {{ resident.phone1 }}
          <el-button size="mini"type="primary" @click="sendCodeByPhone">修改</el-button>
          <VerifyCaptchaDialog
              :visible="verifyCodeVisible"
              :phone1="resident.phone1"
              :phone2="resident.phone2"
              :isPhone="isPhone"
              @verify-success="showChangePhoneModal"
          />
          <ChangePhoneDialog
              :visible.sync="changePhoneVisible"
              :isPhone="isPhone"
              :id="resident.id"
              @change-success="handlePhoneChangeSuccess"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            联系方式
          </template>
          {{ resident.phone2 }}
          <el-button size="mini"type="primary" @click="sendCodeByPhone2">修改</el-button>
          <VerifyCaptchaDialog
              :visible="verifyCodeVisible2"
              :phone1="resident.phone1"
              :phone2="resident.phone2"
              :isPhone="false"
              @verify-success="showChangePhoneModal2"
          />
          <ChangePhoneDialog
              :visible.sync="changePhoneVisible2"
              :isPhone="false"
              :id="resident.id"
              @change-success="handlePhoneChangeSuccess2"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
<!--            <i class="el-icon-magic-stick"></i>-->
            <i class="el-icon-location-outline"></i>
            籍贯
          </template>
          {{ resident.nativePlace }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            录入日期
          </template>
          {{ resident.additionTime}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <h3>注：为保证信息安全，修改其他重要信息请自行到物业处办理</h3>
  </div>
</template>

<script>
import VerifyCaptchaDialog from "@/components/VerifyCaptchaDialog";
import ChangePhoneDialog from "@/components/ChangePhoneDialog";
export default {
  name: "WebMyselfView",
  components:{
    VerifyCaptchaDialog,
    ChangePhoneDialog
  },
  data(){
    return{
      resident:JSON.parse(localStorage.getItem("resident")),
      picture:'',
      residentType:{},
      isEmail:true,
      updateEmail:'',
      updatePhone:'',
      verifyCodeVisible: false,
      verifyCodeVisible2: false,
      changePhoneVisible: false,
      changePhoneVisible2: false,
      verifySuccess:false,
      updateOtherPhone:'',
      isPhone:true,

    }
  },
  created() {
    this.picture='http://localhost:8080/static/uploadPic/'+this.resident.picture;
    this.handleResidentType();
  },
  methods:{
    handleResidentType(){
      this.$axios.get("/web/findType",{params:{id:this.resident.residentTypeId}}).then(res=>{
          this.residentType = res.data.residentType;
      });
    },
    sendCodeByPhone(){
      this.isPhone = true;
      this.verifyCodeVisible=true;
    },
    sendCodeByPhone2(){
      this.isPhone = false;
      this.verifyCodeVisible2=true;
    },
    //验证是否成功然后确定是否要打开修改手机号的对话框
    showChangePhoneModal(isSuccess) {
      this.verifyCodeVisible = false;
      this.changePhoneVisible = isSuccess;
    },
    handlePhoneChangeSuccess(result){
      this.verifyCodeVisible = false;
      this.changePhoneVisible = false;
      if (result==100){
        this.$message.success("已取消")
      }
      if (result==5){
        this.$message.success("修改成功，下次登录后生效");
      }
    },
    showChangePhoneModal2(isSuccess) {
      this.verifyCodeVisible2 = false;
      this.changePhoneVisible2 = isSuccess;
    },
    handlePhoneChangeSuccess2(result){
      this.verifyCodeVisible2 = false;
      this.changePhoneVisible2= false;
      if (result==100){
        this.$message.success("已取消")
      }
      if (result==5){
        this.$message.success("修改成功，下次登录后生效");
      }
    },
    //修改邮箱
    clickAddEmail(isShow){
        if (isShow===true){
          this.isEmail=true;
        }
        else{
          this.isEmail=false;
          this.updateEmail='';
        }
    },
    addEmail(){
      this.$axios.get("/web/addEmail",{params:{id:this.resident.id,email:this.updateEmail}}).then(res=>{
        this.$message.success("修改成功下次登录后生效");
        this.resident.email=this.updateEmail;
        this.isEmail=true;
      });
    },
  }
}
</script>

<style scoped>
.bo{
  margin-top: 50px;
  margin-left: 300px;
  width: 800px;
}
.img{
  width: 50px;
}
person_body {
  width: 1000px;
  margin-top: 210px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

.person_body_left {
  width: 27%;
  height: 600px;
  border-radius: 5px;
  margin-right: 3%;
  text-align: center;
}

.person_body_list {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  font-size: 22px;
  border-bottom: 1px solid #f0f0f0;
  background-image: -webkit-linear-gradient(
      left,
      rgb(42, 134, 141),
      #e9e625dc 20%,
      #3498db 40%,
      #e74c3c 60%,
      #09ff009a 80%,
      rgba(82, 196, 204, 0.281) 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}

</style>